<template>
  <div class="all">
    <!--header 标签  -->
    <header>
      <div class="div" @click="back()">
        <img src="../../../assets/返回.png" alt="" />
        <span style="color: #1da4f2">返回</span>
      </div>
      <div class="div">
        <h>{{ day2 }}</h>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>

    <!-- main主体展示 -->
    <div class="main">
      <van-field
        v-for="(item, index) in Daydata"
        :key="item.id"
        size="large"
        is-link
        type="text"
        readonly
        :value="item.content + 'kg'"
        :label="item.time"
        input-align="right"
        @click="Details(item.id)"
      >
        <template v-slot:right-icon>
          <img
            src="../../../assets/xiajiang.png"
            alt=""
            style="width: 15px; height: 17px"
            v-show="btm[index]"
          />
          <img
            src="../../../assets/shangsheng.png"
            alt=""
            style="width: 15px; height: 17px"
            v-show="top[index]"
          />
        </template>
      </van-field>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DayList',
  data() {
    return {
      userid: this.$route.query.userid,
      day: this.$route.query.day,
      day2: this.$route.query.day.substr(0,4)+'年'+this.$route.query.day.substr(5,2)+'月'+this.$route.query.day.substr(8,2)+'日',
      Daydata: [],
      // 图标是上还是下
      btm: [],
      top: [],
    }
  },
  methods: {
    //获取日期天的体重
    getfindHealthdataTzTian() {
      this.$http
        .findHealthdataTzTian({
          time: this.day.split('-').join('/'),
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.Daydata = res.data.data
            // this.$toast('成功！')
            // 图标是上还是下
            for (var i = this.Daydata.length - 2; i >= 0; i--) {
              if (this.Daydata[i].content - this.Daydata[i + 1].content>0) {
                this.top[i] = 1
                this.btm[i] = 0
              } else {
                this.top[i] = 0
                this.btm[i] = 1
              }
            }
          } else {
            this.$toast('暂无数据！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //   返回
    back() {
      this.$router.history.go(-1)
    },
    // Datails()历史记录-天 跳转
    Details(i) {
      this.$router.push({
        path: '/TiZhongDetails',
        query: { userid: this.userid, time_id: i },
      })
    },
  },
  mounted() {
    this.getfindHealthdataTzTian()
  },
}
</script>
<style lang="less" scoped>
/* header布局 */
.all {
  width: 100%;
  /*height: 100%;*/
  height: calc(100vh - 50px);
  background: #faf9fe;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div {
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div img {
  margin-right: 5px;
}
.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span {
  margin-right: 15px;
}
.div:nth-child(2) {
  justify-content: center;
}
.div:nth-child(3) {
  justify-content: flex-end;
}

// main布局
</style>